<template>
	<view class="task-page">
		<view v-if="filteredTaskList.length" class="task-list">
			<view v-for="task in filteredTaskList" :key="task.taskId" class="task-card">
				<view class="task-title">{{ task.taskName }}</view>
				<view class="task-info">📁 项目：{{ task.projectName }}</view>
				<view class="task-info">📝 描述：{{ task.description }}</view>
				<view class="task-info">📌 状态：{{ task.status }}</view>
				<view class="task-info">👤 指派人：{{ task.assignedByUsername }}</view>
				<view class="task-info">👷 执行人：{{ task.assignedStaffUsername }}</view>
				<view class="task-info">⏰ 预计完成时间：{{ task.expectedCompletionDate.split('T')[0] }}</view>
				
				<view class="action-buttons">
					<button v-if="task.status === '已分配'" class="btn accept" @click="acceptTask(task.taskId)">
						收到任务
					</button>
					<view v-if="task.status === '进行中'" class="btn-group">
						<button class="btn upload" @click="gotoUpload(task)">
							上传工作
						</button>
						<button class="btn complete" @click="gotoComplete(task)">
							完成工作
						</button>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="empty">暂无已分配或进行中的任务</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskList: [],
				filteredTaskList: []
			};
		},
		onLoad() {
			this.getTaskList();
		},
		// 在 WorkPages 页面的 script 部分
		onShow() {
		  // 每次页面显示时都刷新任务列表
		  this.getTaskList();
		},
		methods: {
			acceptTask(taskId) {
				const token = uni.getStorageSync('token');
				uni.request({
					url: this.$baseUrl + '/work/acceptTask?taskId=' + taskId,
					method: 'POST',
					header: {
						'satoken': token
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '任务接收成功',
								icon: 'success'
							});
							this.getTaskList();
						} else {
							uni.showToast({
								title: res.data.message || '任务接收失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			},
			gotoUpload(task) {
				const taskData = encodeURIComponent(JSON.stringify({
					taskName: task.taskName,
					projectName: task.projectName,
					taskId: task.taskId
				}));
				uni.navigateTo({
					url: `/pages/WorkPages/UploadWork?task=${taskData}`
				});
			},
			gotoComplete(task) {
				const taskData = encodeURIComponent(JSON.stringify({
					taskId: task.taskId,
					taskName: task.taskName
				}));
				uni.navigateTo({
					url: `/pages/WorkPages/CompleteTask?task=${taskData}`
				});
			},
			getTaskList() {
				const token = uni.getStorageSync('token');
				uni.request({
					url: this.$baseUrl + '/work/getBelongSelf',
					method: 'GET',
					header: {
						'satoken': token
					},
					success: (res) => {
						if (res.data.code === 200 && Array.isArray(res.data.data)) {
							this.taskList = res.data.data;
							this.filteredTaskList = this.taskList.filter(task => 
								task.status === '已分配' || task.status === '进行中'
							);
						} else {
							uni.showToast({
								title: '获取任务失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.task-page {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.task-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.task-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.task-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.task-info {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
		line-height: 1.6;
	}

	.empty {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		margin-top: 100rpx;
	}

	.action-buttons {
		margin-top: 20rpx;
	}

	.btn {
		margin-top: 10rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.btn-group {
		display: flex;
		gap: 20rpx;
	}

	.btn-group .btn {
		flex: 1;
	}

	.accept {
		background-color: #4CAF50;
		color: white;
	}

	.upload {
		background-color: #2196F3;
		color: white;
	}

	.complete {
		background-color: #FF9800;
		color: white;
	}
</style>